<template>
  <!-- 预警任务首页 -->
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item>预警任务</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency-dt">
        <!-- 地图 -->
        <mapContent ref="mapContent" @typeNames="childData" />
      </div>
      <div class="Emergency-tb">
        <!-- 搜索 开始 -->
        <div class="Emergency-tb-bd">
          <div class="select">
            <el-select v-model="noticeId" style="width: 100%" @change="selectChange" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="conter_content">
          <div class="one_num">
            <div class="statistics">
              <div class="tongji">预警任务各专业数量统计</div>
              <div class="zongshu">
                <span style="">任务总数：</span><span class="num" @click="totalClick">{{ leftTotol }}</span>
                <span class="unit">（单位）：个</span>
              </div>
            </div>
            <div class="box_title">
              <div class="one">
                <div></div>
                <div>已反馈</div>
                <div>未反馈</div>
                <div class="heji">合计</div>
              </div>
              <div class="box_typeList">
                <div class="two two_one" v-for="(item, index) in numList" :key="index">
                  <div>{{ item.professional }}</div>
                  <div>{{ item.hasFeedback }}</div>
                  <div>{{ item.notFeedback }}</div>
                  <div>{{ item.total }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="echarts_box">
            <div class="video_input">
              <div class="title_name">
                预警任务各任务类型数量统计<span style="font-size: 14px; color: #fff"></span>
              </div>
              <!-- <div style="margin-left: 10px;">
                <div class="more" @click="handleGengduo">更多<i class="el-icon-d-arrow-right" color="#fff"></i></div>
              </div> -->
            </div>
            <div id="oneLeftPie" :style="{ width: pieWidth, height: '90%' }"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="Emergency-tb-bt">
      <div class="Emergency-tb-zzt" style="
          margin-top: 10px;
          border: rgba(10, 73, 187) 1px solid;
          height: 240px;
        ">
        <div class="display_flex color_fff">
          <div style="margin: 6px 0">
            <span style="
                color: #fff;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 700;
                padding: 0 10px;
              ">预警任务表</span>
          </div>
          <div class="more" style="color: #fff" @click="handleMore">
            更多<i class="el-icon-d-arrow-right" color="#fff"></i>
          </div>
        </div>
        <el-table :span-method="objectSpanMethod" max-height="200px" :header-cell-style="{
          background: '#235ED2',
          color: '#fff',
          border: 'none',
          fontSize: '18px',
          textAlign: 'center',
          'text-align': 'center',
        }" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" size="small"
          :row-class-name="tableRowClassName">
          <el-table-column prop="xh" label="序号" align="center" width="60">
          </el-table-column>
          <el-table-column prop="taskName" label="主任务名称" align="left" width="220">
          </el-table-column>
          <el-table-column prop="subTaskName" label="子任务名称" align="left" width="220">
          </el-table-column>
          <el-table-column prop="subTaskType" label="任务类型" align="center" width="90">
          </el-table-column>
          <el-table-column prop="profession" align="center" label="专业" width="60">
          </el-table-column>
          <el-table-column prop="subTaskContent" align="left" label="任务内容" width="405">
          </el-table-column>
          <el-table-column prop="subDutyDept" label="责任单位/部门" align="center" width="160">
          </el-table-column>
          <el-table-column prop="publishTime" label="发布时间" align="center" width="110">
          </el-table-column>
          <el-table-column prop="feedBackTime" align="center" width="110" label="反馈时间">
          </el-table-column>
          <el-table-column prop="description" align="left" label="反馈描述">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.description" placement="top">
                <span class="description_fkms">{{
                  scope.row.description
                }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import mapContent from "./components/noWjMapContent.vue";
import "@/assets/style/Emergency.less";
import {
  getIssueNoticeList,
  homePageList,
  TaskStatistics,
  taskType
} from "@/api/EarlyWarningManagement/yjrw.js";
export default {
  name: "DisasterReporting",
  components: { mapContent },
  data() {
    return {
      pieWidth: "100%",
      typeName: "",
      leftTotol: 0,
      inputSite: "",
      tableData: [],
      categories: [
        "特巡特护",
        "值守",
        "应急供电",
        "用电检查",
        "救援",
        "抢修",
        "其他"
      ],
      rightData: [0, 0, 0, 0, 0, 0, 0],
      options: [],
      value: "",
      spanArr: [],
      contactDot: 0,
      rowXh: 1,
      numList: [],
      typeList: [],
      noticeId: ""
    };
  },
  created() {
    this.getNoticeOption();
  },
  methods: {
    // 动态修改表格颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.xh % 2 === 1) {
        return "transparent";
      } else if (row.xh % 2 === 0) {
        return "noTransparent";
      }
      return "";
    },
    // 表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0, 1].includes(columnIndex)) {
        if (this.spanArr[rowIndex]) {
          return {
            rowspan: this.spanArr[rowIndex],
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    // 获取列表
    getList(val) {
      let parmas = {};
      if (val) {
        parmas = {
          ...val
        };
      }
      homePageList(parmas).then((res) => {
        const result = res;
        result.forEach((item, index) => {
          if (index === 0) {
            this.spanArr.push(1);
            this.contactDot = 0;
            item.xh = this.rowXh;
          } else {
            if (item.mainTaskId === result[index - 1].mainTaskId) {
              this.spanArr[this.contactDot] += 1;
              this.spanArr.push(0);
              item.xh = this.rowXh;
            } else {
              this.contactDot = index;
              this.spanArr.push(1);
              this.rowXh++;
              item.xh = this.rowXh;
            }
          }
        });
        this.$set(this, "tableData", result);
      });
    },
    dialogVisibleClick(i) {
      this.btnNum = i.id;
    },
    totalClick() {
      const flowCode = "6, 7, 10, 11, 12, 23"; // 设置 flowCode 的值，可以根据实际需求进行修改

      if (this.noticeId) {
        this.$router.push({
          path: "/WarningActionList",
          query: { flowCode: flowCode.replace(/ /g, ""), id: this.noticeId, isCheck: true }
        });
      } else {
        this.$router.push({
          path: "/WarningActionList",
          query: { flowCode: flowCode.replace(/ /g, ""), isCheck: true }
        });
      }
    },


    childData(param) {
      if (param) {
        this.typeName = param[0].name;
        this.$nextTick(() => {
          // this.TeamLeftPie() // 饼图
          // this.TeamRightLBar() // 柱状图
        });
      }
    },
    oneLeftPie(enabled) {
      //  获取数据
      this.$Highcharts.chart("oneLeftPie", {
        chart: {
          type: "column",
          inverted: true, // 横向
          backgroundColor: "transparent",

          options3d: {
            enabled: true,
            alpha: 5,
            beta: 0,
            depth: 20
          }
        },
        title: {
          // 去除 头部 chart title
          text: null
        },
        credits: {
          // 去除logo
          enabled: false
        },
        legend: {
          // 去除图例
          enabled: false
        },
        colors: [
          "#1ED91C",
          "#1ED91C",
          "#B24C22",
          "#B24C22",
          "#61D8EC",
          "#61D8EC",
          "#1ED91C"
        ],
        xAxis: {
          categories: [
            "特巡特护",
            "值守",
            "应急供电",
            "用电检查",
            "救援",
            "抢修",
            "其他"
          ],
          gridLineColor: "transparent",
          labels: {
            staggerLines: 1,
            style: {
              color: "#fff", // 颜色
              fontSize: "14px" // 字体
            }
          }
        },
        yAxis: {
          title: {
            text: null
          },
          lineWidth: 0, // 去掉x轴线
          tickWidth: 0, // 去掉刻度
          gridLineWidth: 0, // 隐藏y轴刻度线
          allowDecimals: false, // 刻度数值为整数
          labels: {
            enabled,
            staggerLines: 1,
            style: {
              color: "#fff", // 颜色
              fontSize: "14px" // 字体
            }
          },
          gridLineColor: "rgba(0,0,0,0)",
          lineColor: "#22588F"
        },
        tooltip: {
          headerFormat: "<b>{point.key}</b>",
          pointFormat: '<span style="color:{series.color}"></span>： {point.y}',
          backgroundColor: "rgba(22,66,120)",
          style: {
            color: "#fff"
          }
        },
        plotOptions: {
          // 柱状图 顶部数值
          column: {
            depth: 25,
            pointPadding: 0.1,
            borderWidth: 0,
            dataLabels: {
              enabled: true, // 设置显示对应y的值
              style: {
                color: "#fff"
              }
            }
          }
        },
        series: [
          {
            // name: '销售',
            colorByPoint: true,
            data: this.rightData
          }
        ]
      });
    },
    // 更多
    handleMore() {
      const flowCode = "6, 7, 10, 11, 12, 23";
      this.$router.push({
        path: "/WarningActionList",
        query: { flowCode: flowCode.replace(/ /g, ""), isCheck: true }
      });
    },
    getNoticeOption() {
      getIssueNoticeList({ pageNum: 1, pageSize: 10 }).then((res) => {
        const option = res.data.map((item) => {
          return {
            label: item.warningNoticeName,
            value: item.id
          };
        });
        console.log(option, "???????option");
        this.$set(this, "options", option);
        if (this.options.length) {
          this.noticeId = this.options[0].value;
          const params = {
            noticeId: this.options[0].value
          };
          this.getList(params);
          this.getTaskNum(this.options[0].value);
          this.getTaskType(this.options[0].value);
        }
      });
    },
    selectChange(val) {
      this.noticeId = val;
      const params = {
        noticeId: val
      };

      this.spanArr = [];
      this.contactDot = 0;
      this.rowXh = 1;
      this.tableData = [];
      this.getList(params);
      this.getTaskNum(val);
      this.getTaskType(val);
    },
    // 获取预警任务各专业数量统计
    getTaskNum(id) {
      this.numList = [];
      TaskStatistics({ id: id }).then((res) => {
        this.numList = res.length > 0 ? res : [
          {
            "total": 0,
            "hasFeedback": 0,
            "notFeedback": 0,
            "professional": "配电专业"
          },
          {
            "total": 0,
            "hasFeedback": 0,
            "notFeedback": 0,
            "professional": "调度专业"
          },
          {
            "total": 0,
            "hasFeedback": 0,
            "notFeedback": 0,
            "professional": "变电专业"
          },
          {
            "total": 0,
            "hasFeedback": 0,
            "notFeedback": 0,
            "professional": "物资专业"
          },
          {
            "total": 0,
            "hasFeedback": 0,
            "notFeedback": 0,
            "professional": "输电专业"
          }
        ];
        let leftTotol = 0;
        this.leftTotol = res.forEach((el) => {
          leftTotol += el.total;
        });
        this.leftTotol = leftTotol;
      });
    },
    // 获取预警任务各任务类型数量统计
    getTaskType(id) {
      taskType({ id: id }).then((res) => {
        let result = [];
        let enabled = false;
        if (res.length > 0) {
          enabled = true;
          result = res;
          result.forEach((el) => {
            this.categories.forEach((val, index) => {
              if (el.taskType === val) {
                this.rightData[index] = Number(el.total);
              }
            });
          });
        } else {
          result = [
            {
              "taskType": "特巡特护",
              "total": 0
            },
            {
              "taskType": "值守",
              "total": 0
            },
            {
              "taskType": "应急供电",
              "total": 0
            },
            {
              "taskType": "用电检查",
              "total": 0
            },
            {
              "taskType": "救援",
              "total": 0
            },
            {
              "taskType": "抢修",
              "total": 0
            },
            {
              "taskType": "其它",
              "total": 0
            }
          ];
          this.pieWidth = "140px";
        }

        result.forEach((el) => {
          this.categories.forEach((val, index) => {
            if (el.taskType === val) {
              this.rightData[index] = Number(el.total);
            }
          });
        });
        this.$nextTick(() => {
          this.oneLeftPie(enabled); // 饼图
        });
      });
    }
  }
};
</script>

<style scoped lang="less">
// @import "../../../assets/style/DisasterInformation.less";
.Emergency {
  height: 70vh;
  // padding: 0px 20px;
  margin: 0;

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .Emergency-tb-zzt /deep/ .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--stripedtd {
    background-color: #233347;
    /*隔行变色*/
  }

  .Emergency-tb-zzt /deep/ .el-table__body {
    color: #fff !important;
  }

  .Emergency-tb-zzt /deep/ .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
  }

  // .Emergency-tb-zzt /deep/ .el-table tr {
  //   background-color: transparent !important;
  // }
  .Emergency-tb-zzt /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: rgba(255, 255, 255, 0.2);
  }

  .Emergency-tb-zzt /deep/ .el-table td {
    border-bottom: 0px solid #dfe6ec !important;
  }

  .Emergency-tb-zzt /deep/ .el-table th {
    border-bottom: 0px solid #dfe6ec !important;
  }

  .Emergency-tb-zzt /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: transparent;
  }

  /deep/ .el-table__body tr:hover>td {
    background-color: rgba(255, 255, 255, 0.2);
  }

  /deep/ .el-table__body tr.current-row>td {
    background-color: rgba(255, 255, 255, 0.2);
  }

  //
  .Emergency-tb-bd {
    width: 100%;
    height: 10%;

    .flexBetweens {
      align-items: center;
    }

    :deep(.el-form) {
      margin-top: 10px;
    }

    :deep(.el-form-item__label) {
      font-family: PingFang SC;
      font-weight: 400;
      font-style: normal;
      color: #eeeeee;
    }

    :deep(.el-form-item__content) {
      width: 60%;
    }

    :deep(.el-input__inner) {
      background-color: rgba(34, 88, 143, 1);
      border: rgba(10, 73, 187) 1px solid;
    }
  }

  .Emergency-center {
    width: 100%;
    height: 74%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .Emergency-dt {
      width: 45%;
      height: 100%;
      border: rgba(10, 73, 187) 1px solid;
    }

    .Emergency-tb {
      width: 54%;
      height: 100%;
      display: flex;
      flex-direction: column;

      // justify-content: space-between;
      .text_content {
        width: 100%;
        // height: 45%;
        height: 300px;
        border: rgba(10, 73, 187) 1px solid;
        border-radius: 4px;

        :deep(.el-input__inner) {
          height: 23px;
          line-height: 23px;
          border: #3270ff 1px solid;
          color: #eeeeee;
          background-color: rgba(34, 88, 143, 1);
        }
      }

      .el-header,
      .el-footer {
        background-color: #3270ff;
        color: #333;

        line-height: 40px;
      }

      .conter_content {
        width: 100%;
        height: 90%;
        display: flex;
        border: rgba(10, 73, 187) 1px solid;

        >div {
          flex: 1;
        }

        .one_num {
          display: flex;
          height: 100%;
          flex-direction: column;

          .statistics {
            display: flex;
            height: 10%;
            align-items: center;
            justify-content: space-around;

            .tongji {
              font-size: 22px;
              font-weight: 600;
              color: #fff;
              font-family: Microsoft YaHei UI;
            }

            .zongshu {
              color: #fff;
              margin-left: 6px;
              font-weight: bold;

              .num {
                color: #d8fc09;
                font-size: 24px;
                border-bottom: 1px solid #d8fc09;
                cursor: pointer;
              }

              .unit {
                color: #fff;
                font-size: 12px;
                margin-left: 12px;
              }
            }
          }

          .box_title {
            overflow: scroll;
            margin-top: 10px;
            flex: 1;
            display: flex;
            flex-direction: column;

            .one {
              height: 5%;
              display: flex;

              div {
                flex: 1;
                color: #fff;
                font-size: 20px;
                margin-left: 8px;
                font-family: Microsoft YaHei;
              }
            }

            .box_typeList {
              overflow: scroll;
              flex: 1;
              margin-top: 2%;

              .two {
                display: flex;

                >div {
                  flex: 1;
                  color: #fff;
                  font-size: 14px;
                }
              }

              .two_one {
                padding: 0 10px;
                margin: 8px 0 30px 0;

                // text-align: center;
                div:nth-child(1) {
                  width: 20px;
                  height: 40px;
                  line-height: 40px;
                  color: #ffffff;
                  font-size: 16px;
                  text-align: center;
                  margin-right: 16px;
                }

                div:nth-child(2) {
                  width: 20px;
                  height: 40px;
                  line-height: 40px;
                  color: #f59a23;
                  border: rgba(10, 73, 187) 1px solid;
                  font-size: 24px;
                  margin: 0 50px 0 -20px;
                  text-align: center;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                }

                div:nth-child(3) {
                  width: 20px;
                  height: 40px;
                  line-height: 40px;
                  color: #95f204;
                  border: rgba(10, 73, 187) 1px solid;
                  font-size: 24px;
                  margin: 0 50px 0 -20px;
                  text-align: center;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                }

                div:nth-child(4) {
                  width: 20px;
                  height: 40px;
                  line-height: 40px;
                  color: #ffffff;
                  border: rgba(10, 73, 187) 1px solid;
                  font-size: 24px;
                  margin: 0 25px 0 -20px;
                  text-align: center;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                }
              }

              .two_one:last-child {
                margin: 8px 0 15px 0;
              }
            }
          }

          ::-webkit-scrollbar {
            display: none !important;
          }
        }
      }

      .video_input {
        display: flex;
        // justify-content: space-between;
        justify-content: center;
        padding: 10px 14px;
        margin-top: 10px;

        .title_name {
          color: #fff;
          font-size: 22px;
          font-weight: 600;
          text-align: center;
        }
      }

      .Emergency-tb-bt {
        width: 100%;
        // height: 45%;
        // border: #3270ff 1px solid;
        border: rgba(10, 73, 187) 1px solid;
        border-radius: 4px;

        :deep(.el-input__inner) {
          height: 23px;
          line-height: 23px;
          border: #3270ff 1px solid;
          color: #eeeeee;
          background-color: rgba(34, 88, 143, 1);
        }
      }
    }
  }
}

:deep .el-table__cell.gutter {
  background: rgb(35, 94, 210);
}

:deep(div::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  box-shadow: none;
  background-color: transparent;
}

:deep(div::-webkit-scrollbar-track) {
  border-radius: 0;
  background: transparent;
  border: none;
}

.echarts_box {
  margin-left: 10px;
  position: relative;

  .echarts_legend {
    display: flex;
    position: absolute;
    color: #fff;
    top: 15%;
    left: 23%;

    .legend_one {
      text-align: center;

      .one {
        display: inline-block;
        height: 14px;
        width: 14px;
        background: #5390f3;
        margin-right: 6px;
        border-radius: 4px;
      }
    }

    .legend_two {
      margin: 0 20px;
      text-align: center;

      .two {
        display: inline-block;
        height: 14px;
        width: 14px;
        background: #5fece2;
        margin-right: 6px;
        border-radius: 4px;
      }
    }

    .legend_three {
      text-align: center;

      .three {
        display: inline-block;
        height: 14px;
        width: 14px;
        background: #f1dd5e;
        margin-right: 6px;
        border-radius: 4px;
      }
    }
  }
}

/deep/ .el-table::before {
  background: none;
}

// /deep/ .el-table .cell{
//   font-size: 1px;
// }
/deep/ .el-table .el-table__cell .cell {
  font-size: 16px;
  line-height: 20px;
}

.more {
  color: #2052dd;
  font-size: 16px;
  font-family: "Microsoft YaHei";
  cursor: pointer;
}

.display_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.color_fff {
  color: #fff;
}

.select {
  display: inline-block;
  width: 100%;
  // height: 50%;
  height: 40px;
  position: relative;
  vertical-align: middle;
  padding: 0;
  overflow: hidden;
  border: none;
  opacity: 0.7;
  box-shadow: 1px 1px 10px 2px rgb(60, 213, 260) inset;
  // border-radius: 4px;
  background: rgba(0, 127, 207, 0.8);
  text-shadow: none;
  transition: box-shadow 0.25s ease;
  z-index: 2;
}

// .select_one {
:deep(.el-select) {
  .el-input--suffix .el-input__inner {
    height: 40px;
    box-shadow: 1px 1px 10px 2px #36afff inset;
    border: none;
    border-radius: 5px;
    color: #eeeeee;
    background-color: rgba(34, 88, 143, 0.5);
  }
}

// }
.select:hover {
  box-shadow: 1px 1px 10px 2px rgb(43, 140, 243) inset;
}

.select:before {
  display: none;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #fff;
  top: 45%;
  right: 10px;
  cursor: pointer;
  z-index: -2;
}

.select :deep(.el-input__inner) {
  cursor: pointer;
  // color: rgb(255, 255, 255);
  color: #fff;
  padding: 4px 10px;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 18px;
  font-weight: bold;

  option {
    padding-top: 15px;
    padding-bottom: 15px;
    background: rgba(46, 88, 219, 0.5);
    color: #fff;
  }
}


.select :deep(.el-input__inner):focus {
  outline: none;
}

// .tab_btn {
//   margin-top: 10px;
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }
.transmission_select,
.content_lj {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px 0 20px;
  height: 30px;

  >div {
    color: #fff;
    font-size: 14px;
    // margin-bottom: 30px;
  }
}

.el-table__row.statistics-warning-row {
  background: red;
}

.blueRowbg {
  background: "#488aff";
}
</style>
<style lang="less">
.transparent {
  background-color: transparent !important;
  /*隔行变色*/
}

.noTransparent {
  background-color: rgba(255, 255, 255, 0.2) !important;
  /*隔行变色*/
}

.description_fkms {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 2; //行数
  line-clamp: 2;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}
</style>
